import React, { useMemo, useState } from 'react';
import TopNavBar from '../TopNavBar';
import styles from './index.less';
import { Modal } from 'antd-mobile';

export default ({ gameName, gameRuleTpl, selfUtilTpl, children }: any) => {

    const [isFillScreen, setIsFillScreen] = useState(false);
    const [gameRuleVisible, setGameRuleVisible] = useState(false);

    const gameContentClassName = useMemo(() => {
        return isFillScreen ? 'fill-screen' : ''
    }, [isFillScreen]);

    return (
        <div className={styles.gameWrapper}>
            <TopNavBar pageTitle={gameName} backLink="/gameList" />
            <div className={`game-content ${gameContentClassName}`}>
                <div className="game-util">
                    {selfUtilTpl}
                    <span onClick={() => setGameRuleVisible(true)}>
                        游戏规则
                    </span>
                    <span onClick={() => setIsFillScreen(!isFillScreen)}>
                        {isFillScreen ? '退出全屏' : '全屏'}
                    </span>
                </div>
                <div className="game">
                    {children}
                </div>
            </div>
            <Modal
                visible={gameRuleVisible}
                transparent
                maskClosable={false}
                onClose={() => setGameRuleVisible(false)}
                title="游戏规则"
                footer={[{ text: '我知道了', onPress: () => setGameRuleVisible(false) }]}
            >
                <div className="game-rule-wrapper" style={{ minHeight: 100, overflowY: 'scroll', textAlign: 'left' }}>
                    {gameRuleTpl}
                </div>
            </Modal>
        </div>
    );
}
